<!--
 * new page
 * @author: zhuangming
 * @since: 2025-03-04
 * merList.vue
-->
<template>
  <div style="padding: 10px; font-size: 24rpx" v-if="merData.length">
    <div v-for="(item, index) in merData" :key="index" @click="goDetail(item)">
      <div style="background: #ffffff; margin-top: 10px; box-shadow: 0 0 25px 0 #ecf3ff; padding: 10px; border-radius: 5px">
        <div style="display: flex">
          <div style="width: 120rpx">
            <image
              :src="(item.merAvatar && item.merAvatar.indexOf('http')) !== -1 ? item.merAvatar : imgurl + item.merAvatar"
              style="width: 120rpx; height: 120rpx; border-radius: 5px"
            ></image>
          </div>
          <div style="margin-left: 30rpx; display: grid">
            <div style="font-weight: bold; font-size: 14px; display: flex; justify-content: space-between; align-items: center">
              {{ item.merName }}
              <span style="font-size: 22rpx; color: #999999">{{ getKm(item.distance) }}</span>
            </div>
            <div style="display: flex">
              <div v-for="(category, index) in item.categoryName.split(',').splice(0, 3)" :key="index" style="margin: 0 10rpx 0 0">
                <span style="font-size: 20rpx; color: #fe7f41; background-color: #fff1eb; padding: 3px 6px">{{ category }}</span>
              </div>
            </div>
            <div style="color: #808080; display: flex; align-items: center">
              <u-icon name="map" color="#808080" size="28"></u-icon>
              <span
                style="
                  margin-left: 4rpx;
                  font-size: 24rpx;
                  max-width: 470rpx;
                  min-width: 470rpx;
                  overflow: hidden; 
                  white-space: nowrap; 
                  text-overflow: ellipsis;
                "
                >{{ item.merAddress }}</span
              >
            </div>
          </div>
        </div>
        <div style="margin-left: 150rpx" v-for="(items, i) in item.activityList.slice(0, 2)" :key="i">
          <span style="color: #f86316">￥{{ items.price }}</span>
          <span style="padding-left: 10px; font-size: 10px; font-weight: bold">{{ items.name }}</span>
        </div>
      </div>
    </div>
  </div>
  <div v-else style="text-align: center; padding: 10px; display: flex; flex-direction: column; align-items: center">
    <image class="" mode="aspectFit" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/25/zwsj_20250325090754A001.png"> </image>
    <span style="font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 28rpx; color: #a8a8a8; line-height: 40rpx; text-align: center; font-style: normal">暂无数据</span>
  </div>
</template>

<script>
import { getList } from "../../utils/api/api.js";
import { IMG_URL } from "../../config/index.js";
export default {
  data() {
    return {
      merData: [],
      imgurl: IMG_URL,
      pageNum: 1,
      pageSize: 10,
      total: "",
      categoryId: "",
    };
  },
  onLoad(option) {
    this.categoryId = option.categoryId;
    this.getMerListData(option.categoryId);
  },

  watch: {
    /** 监听 categoryId 变化，重新获取数据 */
    // categoryId(newVal, oldVal) {
    //   if (newVal !== oldVal) {
    //     this.categoryId = newVal;
    //     this.pageNum = 1;
    //     this.listData = [];
    //     this.goodScroll = true;
    //     this.getMerListData(this.categoryId);
    //   }
    // },
  },
  onReachBottom() {
    this.loadMoreData();
  },
  methods: {
    loadMoreData() {
      if (this.pageNum * this.pageSize >= this.total) {
        // 显示没有更多数据的提示
        uni.showToast({
          title: "没有更多数据了",
          icon: "none",
        });
        return;
      } else {
        // 加载下一页数据
        this.pageNum++;
        this.getMerListData(this.categoryId);
      }
    },
    /* 获取距离 */
    getKm(distance) {
      if (distance) {
        if (distance >= 1000000) {
          return ""; // 大于等于1000公里时不展示
        } else if (distance >= 1000) {
          return (distance / 1000).toFixed(1) + "km";
        } else {
          return Number(distance).toFixed(1) + "m";
        }
      }
      return "";
    },
    //获取商户列表 根据商户id
    getMerListData(categoryId) {
      uni.showLoading({
        title: "加载中...",
      });
      var params = {
        categoryIds: categoryId,
        lng: uni.getStorageSync("user_longitude"),
        lat: uni.getStorageSync("user_latitude"),
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        status: 0,
      };
      getList(params).then((res) => {
       this.merData = this.merData.concat(res.rows);
        this.total = res.total;
        uni.hideLoading();
      });
    },
    /** 跳转详情页 */
    goDetail(data) {
      uni.navigateTo({
        url: "/pages_h5/index/components/detail?id=" + data.id,
      });
    },
  },
};
</script>
<style scoped>
.big_box {
  font-size: 24rpx;
}

.big_header {
  background-image: url("https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/25/header-bgi_20250325162639A027.png");
  width: 100%;
  height: 550rpx;
}

.big_header_top {
  height: 100rpx;
  background-color: rgb(255, 222, 203);
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.top_input {
  width: 100%;
  background: #fff;
  height: 70rpx;
  padding-left: 15px;
  border-radius: 5px;
}

.u-border {
  border: none;
  background-color: #fff;
}

.big_header_menu {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
}
</style>
